<template>
  <div class="descGroup">
    <!-- 头部 -->
    <div v-if="type && type != 0" class="descGroup-header items-center">
      <template v-if="type == 1">
        <!-- 数组序号 -->
        <img v-if="order" class="descGroup-order" :src="orderUrl" />
        <!-- 标题 -->
        <div class="descGroup-title">{{ title }}</div>
      </template>
    </div>
    <!-- 内容 -->
    <slot></slot>
  </div>
</template>
<script setup name="descGroup" lang="ts">
import { getOssFileUrl } from "@/utils";

// 属性
const props = withDefaults(
  defineProps<{
    title: string | number;
    type?: string | number;
    order?: string | number;
  }>(),
  {
    type: 1, // 0 不显示 header 1 数组标题样式  2...
    title: "",
  }
);

// 数组标题
let orderUrl = computed(() => {
  if (props.order != undefined) {
    return getOssFileUrl({
      order: `/image/number/${props.order}.svg`,
    }).order;
  } else {
    return;
  }
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.descGroup {
  background-color: #fff;
  border-radius: 12 * 2px;
  padding: 15 * 2px 10 * 2px;

  &-order {
    min-width: 16 * 2px;
    height: 24 * 2px;
    margin-right: 10 * 2px;
  }
  &-title {
    color: #141924;
    font-size: 15 * 2px;
    font-weight: 590;
  }
}
</style>
